/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect, useRef } from 'react'

import styles from './index.less'

export default function Calibration(props) {
  const { direction, multiple } = props
  const [ calibrationLength, setCalibration ] = useState({})
  const calibrationRef = useRef(null)

  useEffect(() => {
    let calibration = calibrationRef.current.getBoundingClientRect()
    setCalibration({width: calibration.width, height: calibration.height})
    let length = direction === 'up' ?  (calibration.width) : calibration.height
    for(let i=0; i<(length / 5 ) ; i++){
      if(i % 10 === 0){
        generateElement(true, i)
      }else {
        generateElement()
      }
    }
  }, [direction])

  const generateElement = (item, num) => {
    let createSpan = document.createElement('div')
    createSpan.className = 'calibrationLine'
    createSpan.style.backgroundColor = '#ccc'
    calibrationRef.current.style.display = 'flex'
    calibrationRef.current.style.justifyContent = 'space-between'
    if(direction === 'up'){
      calibrationRef.current.style.marginLeft = '50px'
      createSpan.style.width = '1px'
      createSpan.style.height = '6px'
      createSpan.style.display = 'inline-block'
    }else {
      calibrationRef.current.style.flexDirection = 'column'
      createSpan.style.height = '1px'
      createSpan.style.width = '6px'
    }
    if(item){
      let createSpanContent = document.createElement('span')
      if(direction === 'up') { 
        createSpan.style.height = '12px'
        createSpanContent.style.transform = 'translate3d(-4px, 20px, 0px)'
        createSpan.style.transform = 'translateY(0px)'
      }else {
        createSpan.style.width = '12px'
        createSpanContent.style.paddingLeft = '20px'
      }
      createSpanContent.style.display = 'block'
      createSpanContent.className = 'calibrationNumber'
      createSpanContent.innerHTML = num * 5
      createSpan.appendChild(createSpanContent)
    }
    calibrationRef.current.appendChild(createSpan)
  }

  useEffect(() => {
    let width = calibrationLength.width ? calibrationLength.width : (calibrationRef.current.getBoundingClientRect().width)
    let height = calibrationLength.height ? calibrationLength.height : (calibrationRef.current.getBoundingClientRect().height)
    let arr = [...calibrationRef.current.querySelectorAll('.calibrationLine')]
    if(arr.length) {
      if(direction === 'up'){
        calibrationRef.current.style.width = (multiple.toFixed(1) * (width)) + 'px'
        arr.forEach((el) => {
          let dom = [...el.querySelectorAll('.calibrationNumber')][0]
          if(dom){
            dom.style.transform = `translate3d(-4px, 16px, 0px) scale(${(multiple + 0.1).toFixed(1)})`
          }
        })
      }else {
        calibrationRef.current.style.height = (multiple.toFixed(1) * (height)) + 'px'
        arr.forEach((el) => {
          let dom = [...el.querySelectorAll('.calibrationNumber')][0]
          if(dom){
            dom.style.transform = `translate3d(-4px, -8px, 0px) scale(${(multiple + 0.1).toFixed(1)})`
          }
        })
      } 
    }
    
  }, [calibrationLength.height, calibrationLength.width, direction, multiple])

  return (
    <div className={styles.calibration} ref={calibrationRef}>
    </div>
  )
}
